.listen {
  width: 100%;
  height: 100%;
}

.title {
  font-size: 42rpx;
  color: #0678b8;
  text-align: center;
  line-height: 50rpx;
}

.box {
  width: 100%;
  height: calc(100% - 90rpx);
  margin-top: 40rpx;
  display: flex;
}

.operation {
  width: 360rpx;
  height: 100%;
  margin-left: 40rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.operation_buton {
  width: 100%;
  height: 84rpx;
  margin-bottom: 40rpx;
  background: #077CBA;
  border-radius: 42rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  &.active {
    background: #faac05;
  }

  text {
    width: auto;
    padding-right: 8rpx;
    padding-left: 0;
    font-size: 32rpx;
    color: #fff;
  }

  .operation_buton_content {
    width: 100%;
    height: 100%;
    border-radius: 42rpx;
    background-color: transparent;
    font-size: 32rpx;
    color: #fff;
    line-height: 82rpx;
    text-align: center;

    &.disabled {
      background: #757575;
    }
  }
}

.content {
  width: calc(100% - 180px);
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content_container {
  width: 100%;
}

.content_box {
  width: 100%;
  max-height: 672rpx;
  overflow: hidden;
  position: relative;
}

.content_scroll {
  position: relative;
  transition: all 0.5s ease;
}

.content_detail {
  width: 100%;
  padding: 4rpx 0;

  &.active {
    .content_item {
      background: #077cba;

      .content_number {
        background: #ffffff;
        color: #0e8fcb;
      }

      .content_text {
        color: #ffffff;
      }
    }
  }

  .content_item {
    width: 100%;
    height: 100%;
    padding: 0 12rpx;
    background: rgba(218, 218, 218, 0.5);
    border-radius: 8rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}

.content_content {
  flex: 1;
  overflow-x: auto;
}

.content_number {
  width: 48rpx;
  height: 48rpx;
  background: #077cba;
  border-radius: 24rpx;
  font-size: 24rpx;
  color: #fff;
  text-align: center;
  line-height: 48rpx;
  flex-shrink: 0;
}

.content_text {
  flex: 1;
  font-size: 28rpx;
  color: #077cba;
  font-weight: 700;
  line-height: 36rpx;
  white-space: nowrap;
  padding: 0 8rpx;
}